oa.view.rf.shadeCircleParts = {
/**
 * Render the structure of an ShadeCircleParts
 *
 * @author Bogdan Cataron
 * @param {ArithmeticProblem} ap  An arithmetic problem.
 */
render: function( ap) {
  var el = {};  
  var rB = document.getElementById("renderBox");
  var apDivEl = dom.createDiv("shadeCircleParts");
  var restSquare = dom.createDiv("restSquare");
  var inputFraction = dom.createDiv("inputFrac","fraction");
  var btnWrapper = dom.createDiv("btnWrapper","moveButtonUp");
  apDivEl.setAttribute("data-nmrofops", ap.type.operators.length);
  rB.appendChild(apDivEl);	
  //given fraction
  el = dom.createDiv("forFraction","fraction");
  restSquare.appendChild(el);
  // equality symbol
  el = dom.createDiv("equalitySymbol","operatorFraction");
  el.innerHTML = "=";
  restSquare.appendChild(el); 
  // numerator
  el = document.createElement("input");
  el.setAttribute("type", "hidden");
  el.setAttribute("class", "operand");
  el.setAttribute("name", "numerator");
  el.setAttribute("id", "askedForNum");
  el.addEventListener("input", oa.view.rf.shadeCircleParts.handleUserInputFractionChooser, false);
  inputFraction.appendChild(el);  
  // slash
  el = document.createElement("hr");
  el.setAttribute("class", "slash");
  inputFraction.appendChild(el);
  // denominator
  el = document.createElement("input");
  el.setAttribute("type", "hidden");
  el.setAttribute("class", "operand");
  el.setAttribute("name", "denominator");
  el.setAttribute("id", "askedForDenom");
  el.addEventListener("input", oa.view.rf.shadeCircleParts.handleUserInputFractionChooser, false);
  inputFraction.appendChild(el);
  restSquare.appendChild(inputFraction);
  // - button for split
  el = dom.createButton("decreaseButton","none","-");
  el.setAttribute("title","Decrease number of divisions");
  el.addEventListener("click", oa.view.rf.shadeCircleParts.decreaseCircleDivision, false); 
  restSquare.appendChild(el);
  // + button for split
  el = dom.createButton("increaseButton","none","+");
  el.setAttribute("title","Increase number of divisions");
  el.addEventListener("click", oa.view.rf.shadeCircleParts.increaseCircleDivision, false); 
  restSquare.appendChild(el);	
  // piechart
  el = dom.createDiv("PositionOfCircle");
  restSquare.appendChild( el);	
  // - button for shade
  el = dom.createButton("decreaseShadeButton","green","-");
  el.setAttribute("title","Decrease number of shaded parts");
  el.addEventListener("click", oa.view.rf.shadeCircleParts.decreaseShadeButton, false); 
  restSquare.appendChild(el);	
  // + button for shade
  el = dom.createButton("increaseShadeButton","green","+");
  el.setAttribute("title","Increase number of shaded parts");
  el.addEventListener("click", oa.view.rf.shadeCircleParts.increaseShadeButton, false); 
  restSquare.appendChild(el);
  // configure the submit/continue button
  el = dom.createButton("submitButton","blue","?");
  el.addEventListener("click", oa.view.rf.shadeCircleParts.handleFractionChooserSubmitNew, false); 
  btnWrapper.appendChild( el);
  restSquare.appendChild( btnWrapper); 
  apDivEl.appendChild(restSquare);
  document.addEventListener("keypress", oa.view.rf.handleKeyPressFractionChooser, true);
},
/**
 * Fill an already rendered problem equation with new values for operands and result
 *
 * @author Bogdan Cataron
 * @param {ArithmeticProblem} ap  An arithmetic problem.
 */
fill: function( ap) {
  var principal = document.getElementById("forFraction");
  var givenFraction = dom.createDiv("givenF","fraction");
  // numerator
  var el = dom.createSpan("numerator1","operand",ap.result[0]);
  givenFraction.appendChild(el);
  // slash
  el = document.createElement("hr");
  el.setAttribute("class", "slash");
  givenFraction.appendChild(el);  
  // denominator
  el = dom.createSpan("denominator1","operand",ap.result[1]);
  givenFraction.appendChild(el);
  principal.appendChild(givenFraction);
  //keep the final result
  finalResult = new Array();
  finalResult[0] = ap.result[0];
  finalResult[1] = ap.result[1];
  fractia = new Array();
  fractia[0] = 0;   //will be the computed num
  fractia[1] = 1 ;  //will be the computed denominator
  //here we delete the old fraction and append a new one 
  princip = document.getElementById("forFraction");
  while (princip.firstChild)
  princip.removeChild(princip.firstChild);
  //add new one
  princip.appendChild(givenFraction);
  //first call of function splitCircle for append an empty circle
  oa.view.rf.shadeCircleParts.splitCircle( fractia[0], fractia[1]);
}
};
//function which takes as parameter number of shaded parts and number of divided parts and create the svg
oa.view.rf.shadeCircleParts.splitCircle = function (num, den) {
  var xmlns = "http://www.w3.org/2000/svg";
  var radius = 100;
  var svg = document.createElementNS(xmlns, "svg");
  var bigCircle = document.createElementNS(xmlns, "circle");
  width = 2 * radius,
  height = 2 * radius,
  padding = 10,
  emptyColor = "none";
  //in z we keep an int number between 1 and 7...to use function "backgroundColors" and also we return only odd numbers for Z because the colors are more powerful
  var z;
  if (fractia[1] > 7) {
	z = fractia[1] - 2;
	if (z%2 == 0) {
	  z = z+1;
	}	
  }else{
	z = fractia[1];
	if ( z%2 == 0) {
	  z = z+1;
	}	
  }
  sx = width / 2 +padding;
  sy = height / 2 +padding;
  filledColor = oa.view.backgroundColors[z];
  svg.setAttribute("version", "1.1");
  svg.setAttribute("width", width + 2*padding);
  svg.setAttribute("height", height + 2*padding);
  bigCircle.setAttribute("cx", sx);
  bigCircle.setAttribute("cy", sy);
  bigCircle.setAttribute("id","bigCircle");
  bigCircle.setAttribute("r", radius);
  bigCircle.setAttribute("stroke", "black");
  bigCircle.setAttribute("stroke-width", "1");
  bigCircle.setAttribute("fill", "none");
  svg.appendChild(bigCircle);
  // circle pieces
  var cx = width / 2 +padding,
  cy = height / 2 +padding;
  //if the denominator is 1)
  if (den == 1) {
    // then if the numerator is 0
	if (num == 0) {
   	  //we will have an empty circle
	  var color;
	  color = emptyColor;
	}else{
	  // if numerator is 1, we will have an filled circle
	  color = filledColor;
	}
	el = document.createElementNS(xmlns, "circle");
	el.setAttribute("cx", cx);
	el.setAttribute("cy", cy);
	el.setAttribute("id","firstCircle"+color);
	el.setAttribute("r", radius);
	el.setAttribute("stroke", "black");
	el.setAttribute("stroke-width", "1");
	el.setAttribute("fill", color);
	svg.appendChild(el);
	//if we have more than one division, we create an circle with "denominator" * parts, and numerator*parts are filled. 	
  }else{
	// angle for each piece
	var pieces = 360 / den;
	for (var i = 1; i <= den; i++) {
	  var fillColor;
	  if (num >=i) {
	    fillColor = filledColor;
	  }else{
		fillColor = emptyColor;
	  }
	  // path to center     + segment path
	  var d = "M"+cx+","+cy + oa.view.rf.pieSegment(pieces * i, pieces, radius);
	  el = document.createElementNS(xmlns, "path");
	  el.setAttribute("d", d);
	  el.setAttribute("stroke", "black");
	  el.setAttribute("stroke-width", "1");
	  el.setAttribute("fill", fillColor);
	  svg.appendChild(el);  
	}
  }
  //delete previous piechart
  piechart = document.getElementById("PositionOfCircle");
  while (piechart.firstChild)
  piechart.removeChild(piechart.firstChild);
  //add new one
  piechart.appendChild(svg);
};
//functions for computing the denominator 
//when the "+" button is pressed,th denominator is increased
oa.view.rf.shadeCircleParts.increaseCircleDivision = function(){
  if (fractia[1] < 9) {
	fractia[1] = fractia[1] + 1;
	fractia[0] = 0;
	oa.view.rf.shadeCircleParts.splitCircle( fractia[0], fractia[1]); 
  }else{
	fractia[0] = 0;
	fractia[1] = 9;
	oa.view.rf.shadeCircleParts.splitCircle( fractia[0], fractia[1]); 
  }
}; 
//when the "-" button is pressed,the denominator is decreased
oa.view.rf.shadeCircleParts.decreaseCircleDivision = function () {
  if (fractia[1] == 1) {
	fractia[0]= 0;
	oa.view.rf.shadeCircleParts.splitCircle( fractia[0], fraction[1]); 
  }else{
	fractia[1] = fractia[1] -1;
	fractia[0] = 0;
	oa.view.rf.shadeCircleParts.splitCircle( fractia[0], fractia[1]);
  }
};
//function for creating every pieSegment
oa.view.rf.pieSegment = function( startDegree, degree, radius) {
  var sRad = startDegree * Math.PI / 180, // to radians
  rad = (startDegree + degree) * Math.PI / 180;
  sx = Math.sin(sRad) * radius, // startPos
  sy = -Math.cos(sRad) * radius,
  ex = Math.sin(rad) * radius - sx, // endPos (relative to startPos)
  ey = -Math.cos(rad) * radius - sy,
  l = degree % 360 > 180 ? 1 : 0;   
  // path from center to startDeg to endDeg and back to center
  return " l"+sx+","+sy+" a"+radius+","+radius+" 0 "+l+",1 "+ex+","+ey+"z";
};
//function for changing the color of pieces of Circle (increase the number of shaded parts)
oa.view.rf.shadeCircleParts.increaseShadeButton = function () {
  if (fractia[1] > fractia[0]) {
	fractia[0] = fractia[0] + 1;  
	document.getElementById("askedForNum").value = fractia[0];
	document.getElementById("askedForDenom").value = fractia[1];
	oa.view.rf.shadeCircleParts.splitCircle( fractia[0],fractia[1]);
  }else{
	oa.view.rf.shadeCircleParts.splitCircle( fractia[0],fractia[1]);
  }
};
//function for changing the color of pieces of Circle (decrease the number of shaded parts)
oa.view.rf.shadeCircleParts.decreaseShadeButton = function() {
  if (fractia[0] > 0) {
	fractia[0] = fractia[0] - 1;
	document.getElementById("askedForNum").value = fractia[0];
	document.getElementById("askedForDenom").value = fractia[1];
	oa.view.rf.shadeCircleParts.splitCircle( fractia[0],fractia[1]);
  }else{
	fractia[0] = 0;
	oa.view.rf.shadeCircleParts.splitCircle( fractia[0],fractia[1]);
  }
};
oa.view.rf.shadeCircleParts.handleFractionChooserSubmitNew = function(e) {
  var userInputFieldNum = document.getElementById("askedForNum"),
  userInputFieldDenom = document.getElementById("askedForDenom"),
  answer = [],
  percentageCorrect = 0,
  i = 0;
  //for generating the final result if learner click directly on submit button without divide or shade the square
  if (document.getElementById('firstCirclenone')) {
	 userInputFieldNum.value = finalResult[0];
	 userInputFieldDenom.value = finalResult[1];
	 oa.view.rf.shadeCircleParts.splitCircle(finalResult[0], finalResult[1]);
	 el = document.getElementById("bigCircle");
	 el.setAttribute("stroke","yellow");
	 el.setAttribute("stroke-width","6");
	 userInputFieldNum.classList.add("given");
	 e.target.innerHTML = "&#9658;";
  }else if (userInputFieldNum.classList.contains("correct") 
    || userInputFieldNum.classList.contains("given")) {  // click continue event
	  userInputFieldNum.classList.remove("correct");
	  userInputFieldDenom.classList.remove("correct");
	  userInputFieldNum.classList.remove("given");
      el = document.getElementById("bigCircle");
	  el.setAttribute("stroke","black");
	  el.setAttribute("stroke-width","1");
      e.target.className="blue";
	  e.target.innerHTML = "?";
	  oa.ctrl.continueCurrentExercise();
  }else{  
	answer[0] = parseInt( userInputFieldNum.value);  
	answer[1] = parseInt( userInputFieldDenom.value);
	if (oa.ctrl.evaluateFraction( answer)) {
	  userInputFieldNum.classList.add("correct");
	  userInputFieldDenom.classList.add("correct");
	  el = document.getElementById("bigCircle");
	  el.setAttribute("stroke","#00FF00");
	  el.setAttribute("stroke-width","6");
	  e.target.innerHTML = "&#9658";
	}
	else{
	  userInputFieldDenom.classList.add("false");
	  userInputFieldNum.classList.add("false");
	  el = document.getElementById("bigCircle");
	  el.setAttribute("stroke","red");
	  el.setAttribute("stroke-width","6");
	}
  }
};
oa.view.rf.shadeCircleParts.handleUserInputFractionChooser = function(e) {
  var el = document.getElementById("bigCircle");
  el.setAttribute("stroke","black");
  el.setAttribute("stroke-width","1");
  var userInputFieldNum = document.getElementById("askedForNum"),
  userInputFieldDenom = document.getElementById("askedForDenom");
  userInputFieldNum.classList.remove("correct");
  userInputFieldNum.classList.remove("false");
  userInputFieldDenom.classList.remove("correct");
  userInputFieldDenom.classList.remove("false");
};